<template>
  <div class="statistics-analysis">
    <Row :gutter="24">
      <!-- 部门统计 -->
      <Col :span="8">
        <Card title="部门工时统计" :bordered="false" dis-hover>
          <div class="department-stats">
            <div 
              v-for="dept in data.departmentStats" 
              :key="dept.dept_name"
              class="dept-item"
            >
              <div class="dept-header">
                <span class="dept-name">{{ dept.dept_name }}</span>
                <span class="dept-hours">{{ dept.total_worktime }}小时</span>
              </div>
              <div class="dept-details">
                <span>平均工时: {{ dept.avg_worktime }}小时</span>
                <span>项目数: {{ dept.total_projects }}个</span>
              </div>
              <Progress 
                :percent="(dept.total_worktime / 2000) * 100" 
                :stroke-width="8"
                :color="getDeptColor(dept.dept_name)"
              />
            </div>
          </div>
        </Card>
      </Col>
      
      <!-- 周统计 -->
      <Col :span="8">
        <Card title="周工时统计" :bordered="false" dis-hover>
          <div class="weekly-stats">
            <div 
              v-for="week in data.weeklyStats" 
              :key="week.week_name"
              class="week-item"
            >
              <div class="week-header">
                <span class="week-name">{{ week.week_name }}</span>
                <span class="week-hours">{{ week.total_worktime }}小时</span>
              </div>
              <div class="week-details">
                <span>已提交: {{ week.submitted_depts }}个部门</span>
                <span>待提交: {{ week.pending_count }}个部门</span>
              </div>
              <div class="week-progress">
                <span>完成率: {{week.completion_rate}}%</span>
                <Progress 
                  :percent="(week.submitted_depts / (week.submitted_depts + week.pending_count)) * 100" 
                  :stroke-width="6"
                  color="#19be6b"
                />
              </div>
            </div>
          </div>
        </Card>
      </Col>
      
      <!-- 项目进度统计 -->
      <Col :span="8">
        <Card title="项目进度统计" :bordered="false" dis-hover>
          <div class="project-progress">
            <div 
              v-for="progress in data.projectProgress" 
              :key="progress.status"
              class="progress-item"
            >
              <div class="progress-header">
                <span class="progress-status">{{ progress.status }}</span>
                <span class="progress-count">{{ progress.count }}个</span>
              </div>
              <div class="progress-bar">
                <Progress 
                  :percent="progress.percentage" 
                  :stroke-width="10"
                  :color="getProgressColor(progress.status)"
                />
                <span class="progress-percent">{{ progress.percentage }}%</span>
              </div>
            </div>
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: 'StatisticsAnalysis',
  props: {
    data: {
      type: Object,
      default: () => ({
        departmentStats: [],
        weeklyStats: [],
        projectProgress: []
      })
    }
  },
  methods: {
    getDeptColor(department) {
      const colorMap = {
        '技术部': '#2d8cf0',
        '产品部': '#19be6b',
        '设计部': '#ff9900',
        '测试部': '#ed4014',
        '运营部': '#9c26b0'
      };
      return '#2d8cf0';//colorMap[department] || '#2d8cf0';
    },
    getProgressColor(status) {
      const colorMap = {
        '进行中': '#19be6b',
        '已完成': '#ff9900',
        '未开始': '#808695',
        '已暂停': '#ed4014'
      };
      return colorMap[status] || '#2d8cf0';
    }
  }
};
</script>

<style lang="less" scoped>
.statistics-analysis {
  margin-bottom: 24px;
}

.department-stats,
.weekly-stats,
.project-progress {
  .dept-item,
  .week-item,
  .progress-item {
    margin-bottom: 16px;
    padding: 12px;
    border-radius: 6px;
    background: #f8f9fa;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.dept-header,
.week-header,
.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  
  .dept-name,
  .week-name,
  .progress-status {
    font-weight: bold;
    color: #333;
  }
  
  .dept-hours,
  .week-hours,
  .progress-count {
    color: #666;
    font-size: 14px;
  }
}

.dept-details,
.week-details {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  color: #666;
}

.week-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  
  span {
    font-size: 12px;
    color: #666;
    min-width: 60px;
  }
}

.progress-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .progress-percent {
    font-size: 12px;
    color: #666;
    min-width: 40px;
  }
}
</style> 